<template>
  <el-menu
      @select="click"
      class="sea-toolbar"
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b">

    <!-- 顶部控制展开关闭的小图标-->
    <el-menu-item @click="switchNavigation">
      <strong>Sea</strong>
      <transition name="fade">
        <span v-show="!expendNavigation">Admin</span>
      </transition>
    </el-menu-item>

    <fragment v-if="tools" v-for="menu in tools" :key="menu.key">
      <!--1级导航-->
      <el-menu-item v-if="menu.children === undefined" :index="menu.key">
        <i :class="menu.icon"></i>
        <span slot="title">{{ menu.title }}</span>
      </el-menu-item>

      <el-submenu v-if="menu.children" :index="menu.key" :route="menu.src">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <fragment v-for="child in menu.children" :key="child.key">
          <!--2级导航-->
          <el-menu-item v-if="child.children === undefined" :index="child.key" :route="child.src">
            {{ child.title }}
          </el-menu-item>

          <!--3级导航-->
          <el-submenu v-if="child.children" :index="child.key">
            <template slot="title">{{ child.title }}</template>
            <el-menu-item v-for="sub in child.children" :key="sub.key" :index="sub.key">{{ sub.title }}</el-menu-item>
          </el-submenu>
        </fragment>
      </el-submenu>
    </fragment>

    <!-- 用户 -->
    <user></user>

    <!-- 右侧导航 -->
    <right></right>

    <!-- 消息栏 -->
    <message></message>

    <!-- 任务栏 -->
    <task></task>
  </el-menu>
</template>
<script>
import right from "./right";
import message from "./message";
import task from "./task";
import user from "./user";

export default {
    name: "toolbar"
    , components: {
        right, message, task, user
    }
    , props: {
        // 是否展开菜单栏
        expendNavigation: {type: Boolean},
        // 菜单栏展开关闭事件，通过事件回传到父级组件
        switchNavigation: {type: Function},
        // 工具栏列表
        tools: {type: Array},
        // 菜单栏点击事件
        click: {type: Function}
    },
    data() {
        return {};
    }
}
</script>
<style scoped>
/** 看来没被引用，别删 */
.fade-enter-active, .fade-leave-active {
    transition: opacity .25s
}

/** 看来没被引用，别删 */
.fade-enter, .fade-leave-to {
    opacity: 0
}
</style>
